<!--component html goes here -->
<div class="padding-bottom-45">
    <nz-tabset>
        <nz-tab [nzTitle]="nzTitle">
            <form nz-form [formGroup]="form" #validateForm="ngForm" (ngSubmit)="save()">
                <!-- 用户账号 -->
                <nz-form-item nz-row>
                    <nz-form-label nz-col [nzSm]="4" nzFor="roleName" nzRequired>角色</nz-form-label>
                    <nz-form-control nz-col [nzSm]="20" [nzErrorTip]="errorNameTpl" nzHasFeedback>
                        <input nz-input formControlName="roleName" [(ngModel)]="role.name" [placeholder]="'角色'"
                            required>
                        <ng-template #errorNameTpl let-control>
                            <ng-container *ngIf="control.hasError('required')">
                                不能为空!
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row>
                    <nz-form-label nz-col [nzSm]="4" nzFor="displayName" nzRequired>名称</nz-form-label>
                    <nz-form-control nz-col [nzSm]="20" [nzErrorTip]="errorDisplayNameTpl" nzHasFeedback>
                        <input nz-input formControlName="displayName" [(ngModel)]="role.displayName"
                            [placeholder]="'名称'" required>
                        <ng-template #errorDisplayNameTpl let-control>
                            <ng-container *ngIf="control.hasError('required')">
                                不能为空!
                            </ng-container>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-row>
                    <nz-form-label nz-col [nzSm]="4" nzFor="description">描述</nz-form-label>
                    <nz-form-control nz-col [nzSm]="20" nzHasFeedback>
                        <input nz-input formControlName="description" [(ngModel)]="role.description"
                            [placeholder]="'角色描述'">
                    </nz-form-control>
                </nz-form-item>
            </form>
        </nz-tab>
        <nz-tab [nzTitle]="'权限'">
            <nz-input-group [nzSuffix]="suffixIcon">
                <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue">
            </nz-input-group>
            <ng-template #suffixIcon>
                <i nz-icon nzType="search"></i>
            </ng-template>
            <nz-tree #treeCom [nzData]="nodes" nzCheckable="true" nzMultiple="true" [nzCheckedKeys]="defaultCheckedKeys"
                [nzSelectedKeys]="defaultSelectedKeys" [nzSearchValue]="searchValue">
            </nz-tree>
        </nz-tab>
    </nz-tabset>
    <!-- 功能按钮 -->
    <div class=" modal-footer ">
        <button nz-button type="button" [disabled]="saving" (click)="close()">
            取消
        </button>
        <button nz-button [nzType]="'primary'" (click)="save()" [disabled]="!validateForm.valid||saving">
            保存
        </button>
    </div>
</div>